<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{infrom}}
       <prent-com :mydata="infrom"></prent-com>
    </div>
    <template id="PrentCom" >
       
        <div>
             <!-- 我是父组件 -->
            {{infrom}}{{mydata}}
            <child-com :mystr="mydata"></child-com>
        </div>   
    </template>

    <!-- 我是子组件 -->
     <template id="ChildCom">
            <div>
                {{infrom}}{{mystr}}
                <small-child-com :mystrs="mystr"></small-child-com>
            </div>
           
    </template>

    <!-- 我是小子组件 -->
        <template id="SmallChildCom">
            <div>
                {{infrom}}{{mystrs}}
            </div>
        </template>
    
</body>
<script src="../../vue.js"></script>
<script>
     let SmallChildCom= {
        props:["mystrs"],
        template:"#SmallChildCom",
        data:function(){
            return {
                infrom:"小子集组件"
            }
        }
    }

    let ChildCom= {
        props:["mystr"],
        template:"#ChildCom",
        components:{
            SmallChildCom
        },
        data:function(){
            return {
                infrom:"子集组件"
            }
        }
    }


    let PrentCom = {
        props:['mydata'],
        template:"#PrentCom",
        components:{
            ChildCom
        },
        data:function(){
            return {
                infrom:"父集组件"
            }
        }
    }

    new Vue({
        
        el:"#app",
        components:{
            PrentCom
        },
        data:{
            infrom:"我是Vue数据"
        },
    })
</script>
</html>